{%extends "base.html"%}

{% block content %}
<div class="container py-5">
  <h3 class="pb-3 border-bottom">预测您的薪资</h3>
  <form class="pb-3" action="/predict" method="POST">
    <div class="form-group">
      <label>心仪岗位</label>
      <select id="key_select" class="form-control" name="station">
        <option value="">请选择岗位</option>
        {% for key in keys %}
        <option value="{{ key }}" {%if data%}{% if data.station == key %} selected {%endif%}{%endif%}>{{ key }}</option>
        {% endfor %}
      </select>
    </div>
    <div class="form-group">
      <label>学历</label>
      <select class="form-control" name="degree">
        <option value="">请选择学历</option>
        <option value="中专" {%if data%}{% if data.degree == '中专' %} selected {%endif%}{%endif%}>中专</option>
        <option value="高中" {%if data%}{% if data.degree == '高中' %} selected {%endif%}{%endif%}>高中</option>
        <option value="大专" {%if data%}{% if data.degree == '大专' %} selected {%endif%}{%endif%}>大专</option>
        <option value="本科" {%if data%}{% if data.degree == '本科' %} selected {%endif%}{%endif%}>本科</option>
        <option value="硕士" {%if data%}{% if data.degree == '硕士' %} selected {%endif%}{%endif%}>硕士</option>
      </select>
    </div>
    <div class="form-group">
      <label>城市</label>
      <select id="city_select" class="form-control" name="city">
        <option value="">请选择城市</option>
      </select>
      <small class="form-text text-muted">请先选择岗位</small>
    </div>
    <div class="form-group">
      <label>工作经验</label>
      <input class="form-control" id="work_exp" placeholder="Enter work experience" name="work_exp" {% if data %} value="{{data.work_exp}}" {%endif%}>
      <small class="form-text text-muted">请输入阿拉伯数字：0, 1, 2....</small>
    </div>
    <div class="d-flex">
      <button type="submit" class="btn btn-primary ml-auto mr-5">智能预测</button>
    </div>
  </form>

  {% if msg %}
  <div class="card mt-4">
    <div class="card-header">
      预测结果
    </div>
    <div class="card-body">
      <div class="text-monospace" style="font-size: 25px;font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif">
        {{ msg }}
      </div>
    </div>
  </div>
  {% endif %}

  {% if prediction %}
  <div class="card mt-4">
    <div class="card-header">
      预测结果
    </div>
    <div class="card-body">
      <div class="text-monospace" style="font-size: 25px;font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif">
        <b>{{ prediction }}</b> 元/月
      </div>
      {% if prediction > house_price %}
      <div class="mt-3">
        <img class="rounded mr-3" src="{{ url_for('static', filename='img/good.jpg') }}"
          width="45" height="45">
          <span>哇! 您的薪资超出本地平均房价水平 <b class="font-italic" style="font-size: 23px">{{ (prediction / house_price - 1) * 100 }}%</b></span>
      </div>
      {% endif %}
    </div>
  </div>
  {% endif %}
</div>
{% endblock %}

{% block styles %}
<!-- 越后面加载，优先级越高 -->
<link rel="stylesheet" href="{{ url_for('static', filename='css/main.css') }}">
{% endblock %}

{% block scripts %}
<script>
function get_citys(key) {
  $.ajax({
    type: 'GET',
    url: '/api/get_station_citys?key=' + key,
    async: false, // 同步请求
    success: function(data){
      console.log(data);
      city_select = $('#city_select');
      city_select.empty();
      city_select.append("<option value=''>请选择城市</option>");
      for (let index = 0; index < data.length; index++) {
        console.log(data[index]);
        city_select.append("<option value='" + data[index] + "'>" + data[index] + "</option>");
      }
    },
    error: function(data){
    }
  });
}

var key;

if ($('#key_select').val() != '') {
  key = $('#key_select').val();
  console.log(key);
  get_citys(key);
}

$('#key_select').change(function() {
  key = $('#key_select').val();
  console.log(key);
  get_citys(key);
})
</script>
{% endblock %}